import React, { useRef, useState } from "react";
import Header from "../components/Header";
import Footer from "../components/Footer";
import service from "../service";
import { useNavigate } from "react-router-dom";

export default function Login() {
  // 用户名:邮箱或者电话状态变量
  let [emailOrPhone, setEmailOrOphone] = useState("");
  // 密码状态变量
  let [upwd, setPwd] = useState("");
  // 邮箱或电话的引用
  let emailOrPhoneRef = useRef();
  // 登陆密码
  let upwdRef = useRef();
  // 用户名相关的提示消息
  let [unameMsg, setUnameMsg] = useState("");
  // 密码相关的提示消息
  let [upwdMsg, setUpwdMsg] = useState("");
  // 跳转页面
  let nav = useNavigate();
  // 点击登陆
  function doLogin() {
    let m = emailOrPhoneRef.current.value;
    let p = upwdRef.current.value;
    service
      .userLogin(m, p)
      .then((data) => {
        console.log(data);
        if (data.code === 400) {
          setUnameMsg("用户名或者密码错误");
        } else if (data.code === 401) {
          setUnameMsg("用户名不能为空");
        } else if (data.code === 402) {
          setUpwdMsg("密码不能为空");
        } else if (data.code === 1) {
          setUnameMsg("登陆成功");
          // 登陆成功 存储uid和userName
          sessionStorage["uid"] = data.uid;
          sessionStorage["userName"] = data.uname;
          // 根据当前uid查询该用户的 购物车历史信息
          // 跳转点击登陆之前的页面
          let p = sessionStorage["pathBeforeLogin"];
          // 如果不是通过按钮进入登陆 跳转到首页
          p = p ? p : "/";
          nav(p);
        } else {
          setUnameMsg("未知的错误");
        }
      })
      .catch((err) => console.log(err));
  }
  return (
    <>
      {/* header */}
      <div className="header_box">
        <Header></Header>
      </div>
      {/* main */}
      <div className="login_box">
        <div className="container">
          <div className="login">
            <h2>用户登录</h2>
            <dl className="clearfloat">
              <dt>
                <span
                  style={{ display: unameMsg ? "inline" : "none" }}
                  className="tips"
                  id="uname_prompt_text"
                >
                  {unameMsg}
                </span>
                用户名：
              </dt>
              <dd>
                <input
                  defaultValue={emailOrPhone}
                  ref={emailOrPhoneRef}
                  type="text"
                  id="uname"
                  placeholder="邮箱/手机号"
                />
                <em className="icon_user"></em>
                <i className="icon_error" id="uname_prompt_icon"></i>
              </dd>
            </dl>
            <dl>
              <dt>
                <span className="tips" id="pwd_prompt_text">
                  {upwdMsg}
                </span>
                密码：
              </dt>
              <dd>
                <input
                  defaultValue={upwd}
                  ref={upwdRef}
                  type="password"
                  id="pwd"
                  placeholder="密码"
                />
                <em className="icon_pwd"></em>
                <i className="icon_error" id="pwd_prompt_icon"></i>
              </dd>
            </dl>
            <p>
              <label>
                <input type="checkbox" />
                <span>自动登录</span>
              </label>
            </p>
            <button onClick={doLogin} type="button" id="login">
              立 即 登 录
            </button>
          </div>
        </div>
      </div>
      {/* footer */}
      <footer className="footer">
        <Footer></Footer>
      </footer>
    </>
  );
}
